<template>
	<div class="u-page">
		<u-navbar :title="Navbar.title" :title-bold="true" title-color="#040503" back-icon-color="#040503" :custom-back="comeback" :background="Navbar.background"
			:border-bottom="false" title-width="380"></u-navbar>
		<div class="aui-flex u-mt-10 u-mb-10" @click="goToSingUp">
			<div class="aui-flex-goods">
				<img :src="picture" alt="">
			</div>
			<div class="aui-flex-box">
				<div class="goods-title">
					{{taskInfo.goodsName?taskInfo.goodsName:''}}
				</div>
				<div class="u-fz-13 u-pt-5" style="color: #9f9d9e;">
					{{taskInfo.specification?taskInfo.specification:''}}
				</div>
				<div class="u-pt-10">
					<u-tag text="品牌推广" color="#fa5650" border-color="#fa5650" bg-color="#ffffff" size="mini" mode="light" />
				</div>
			</div>
		</div>

		<p class="v-sperate"></p>
		<section class="j-block width93">
			<div class="modal-item" @click="showRules">
				<div style="font-weight: bold;">
					【非常重要！请仔细阅读！】
				</div>
				<div style="font-size: smaller;">
					<u-icon :name="iconNameRules" color="#9f9d9e" size="24"></u-icon>
				</div>
			</div>

			<div v-if="show_rule">
				<div class="rule-title">
					成果验收标准
				</div>
				<div class="rule-content">
					<!-- 成果验收标准 -->
					<u-parse :html="this.escape2Html2(taskInfo.acceptanceCriteria)"></u-parse>
					
					<!-- 成果验收标准图片 -->
					<div class="pictrues-box" v-if="acceptanceCriteriaFiles.length > 0">
						<Upload u_appid="evaluation" u_fieldName="acceptanceCriteria" :u_orunid="taskInfo.id" u_type="2"
							:u_readonly="true" :u_initialAttchments="acceptanceCriteriaFiles" 
							@receiveAttachmentsData="getAcceptanceCriteriaFiles"></Upload>
					</div>
					
					<!-- 温馨提示 -->
					<div class="u-font-bold color-red" v-if="taskInfo.enableRating == '1'">
						温馨提示：<br>
						1、验收通过后发放最低报酬，评级后发放等级差额；<br>
						2、每场活动仅有2次修改成果的机会，验收不通过将不发放报酬。<br>
					</div>
					
					<div class="u-font-bold color-red" v-else>
						温馨提示：<br>
						1、验收通过后发放推广报酬；<br>
						2、每场活动仅有2次修改成果的机会，验收不通过将不发放报酬。<br>
					</div>
					
				</div>
				
			</div>
		</section>

		<div v-if="returnReasonList && returnReasonList.length > 0">
			<p class="v-sperate"></p>
			<section class="j-block width93">
				<div class="modal-item" @click="showReason">
					<div style="font-weight: bold;">
						【请按审核意见修改成果，仅2次返修机会！】
					</div>
					<div style="font-size: smaller;">
						<u-icon :name="iconNameReason" color="#9f9d9e" size="24"></u-icon>
					</div>
				</div>
			
				<div v-if="show_reason">
					<div v-for="(item, index) in returnReasonList" :key="index">
						<div class="rule-title">
							第{{item.returnNum}}次审核意见
						</div>
						<div class="rule-content">
							<text user-select='true'>{{item.returnReason}}</text>
						</div>
					</div>
				</div>
			</section>
		</div>
		
		<p class="v-sperate"></p>
		<div v-if="taskInfo.enableReport == '1'">
			<div class="aui-flex">
				<div class="aui-flex-box u-p-10 u-font-bold">
					工作报告
				</div>
			</div>
			<div class="textarea-block u-mb-10">
				<u-input
					v-model="form.reportContent"
					type="textarea"
					maxlength="-1"
					height="300"
					:autoHeight="false"
					placeholder="请按照成果验收标准的要求填写工作报告。" 
				></u-input>
			</div>
			<div style="height: 10rpx ;border-bottom: 2rpx solid #f4f4f4;"></div>
		</div>

		<div v-if="taskInfo.enableMaterial == '1'">
			<div class="aui-flex">
				<div class="aui-flex-box u-p-10 u-font-bold">
					工作素材<span class="Tips">请按照成果验收标准上传工作素材</span>
				</div>
			</div>
			<div class="pictrues-box u-mt-15">
				<Upload u_appid="evaluation" :u_fieldName="userInfo.userId" :u_orunid="recordId" u_type="2"
					:u_initialAttchments="submitResultsFiles" @receiveAttachmentsData="getResultsFiles"></Upload>
			</div>
			<div style="height: 10rpx ;border-bottom: 2rpx solid #f4f4f4;"></div>
		</div>

		<div v-if="taskInfo.enableVoucher == '1'">
			<div class="aui-flex">
				<div class="aui-flex-box u-p-10 u-font-bold">
					截图凭证<span class="Tips">请按照成果验收标准上传截图凭证</span>
				</div>
			</div>
			<div class="pictrues-box u-mt-15">
				<Upload u_appid="evaluation" u_fieldName="voucher" :u_orunid="recordId" u_type="2"
					:u_initialAttchments="voucherFiles" @receiveAttachmentsData="getVoucherFiles"></Upload>
			</div>
			<div style="height: 10rpx ;border-bottom: 2rpx solid #f4f4f4;"></div>
		</div>

		<div class="aui-flex aui-choice-white b-line" v-if="taskInfo.enableOrderId == '1'">
			<div class="aui-flex-box u-p-10">订单号</div>
			<u-input v-model="form.platformOrderNo" input-align="right" placeholder="请填写订单号" @blur="checkOrderNo($event)"/>
		</div>
		
		<div class="aui-flex aui-choice-white b-line">
			<div class="aui-flex-box u-p-10">微信昵称</div>
			<u-input v-model="form.nickName" input-align="right" placeholder="请填写微信昵称" />
		</div>

		<div style="height: 250rpx;"></div>

		<div style="position: fixed;bottom: 0rpx;background-color: #fffbfe;width: 100%;z-index: 3;">
			<div class="u-pt-10 u-pb-30" style="width: 90%;margin: 0 auto;height: 80px;">
				<u-button type="success" :custom-style="customStyle" :disabled="isClickBtn" @click="submit" >
					提交
				</u-button>
				
				<!-- v-if="form.status == '待提交' || form.status == '第1次修改' || form.status == '第2次修改' "
				<u-button type="success" :custom-style="customStyle" disabled="true" v-else>
					已提交
				</u-button> -->
				
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				recordId: '',// 报名记录id
				form: {},// 报名详情
				taskInfo: {},// 测评任务详情
				userInfo: {},// 用户信息
				submitResultsFiles: [],// 工作报告
				voucherFiles: [],// 截图凭证
				isClickBtn: false,
				show_rule: false,
				show_reason: true,
				iconNameReason: 'arrow-down',
				iconNameRules: 'arrow-right',
				customStyle: {
					background: '#eb5468 !important'
				},
				Navbar: {
					title: '提交成果',
					background: {
						backgroundColor: '#f3e4e9',
					}
				},
				returnReasonList: [],
				picture: '',
			}
		},

		onLoad(options) {
			// 未登录跳转到登录页面
			let loginRes = this.checkLogin(1);
			if (!loginRes) {
				return false;
			}
			this.userInfo = uni.getStorageSync('userInfo')
			if (this.isNotNull(options.recordId)) {
				this.recordId = options.recordId
				// 获取报名详情
				this.getJoinDetails(options.recordId)
			} else {
				this.showMSG('error', '出错啦！')
				setTimeout(() => {
					this.goBack()
				}, 2000)
			}
		},

		methods: {

			/**
			 * 获取报名详情
			 */
			async getJoinDetails(recordId) {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/evaluation/signup/info/" + recordId,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200 && result.data) {
					this.form = result.data;// 报名详情
					this.form.nickName = this.userInfo.nickName;// 微信昵称
					
					// 所有返修意见
					if(this.isNotNull(this.form.returnReasonJson)){
						this.returnReasonList = JSON.parse(this.form.returnReasonJson);
					}

					// 获取测评活动详情
					if (this.isNotNull(this.form.mainId)) {
						let result2 = await this.$u.api.unifyMiniRestGet({
							systemid: "meily",
							url: "/evaluation/task/info/" + this.form.mainId,
							loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
						});
						if (result2.code == 200) {
							this.taskInfo = result2.data; // 测评活动详情
							// 活动主图（发起人上传的）
							if (this.isNotNull(this.taskInfo.mainPicture)) {
								this.picture = this.taskInfo.mainPicture.split(',')[0];
								
							} else {
								// 商品图
								if (this.isNotNull(this.taskInfo.goodsImages)) {
									this.picture = this.taskInfo.goodsImages.split(',')[0];
								}
							}
						}
					}

					this.getFiles(this.form.id, this.form.partnerId); // 试用素材
					this.getFiles(this.form.id, "voucher"); // 截图凭证

				} else {
					this.showMSG('error', '出错啦');
					setTimeout(() => {
						this.goBack()
					}, 2500)
				}
			},

			/**
			 * 校验订单号只能为数字+字母
			 * @param {Object} value
			 */
			checkOrderNo(value){
				const regex = /^[a-zA-Z0-9]+$/;
				if(!regex.test(value)){
					this.form.platformOrderNo = '';
					this.$u.toast("请输入正确的订单号，中文字符无效！");
				}
			},
			
			/** 
			 * 提交反馈
			 */
			async submit() {
				
				// 工作报告必填校验
				if(this.form.enableReport == '1'){
					if (!this.isNotNull(this.form.reportContent)) {
						this.$u.toast("请填写工作报告！")
						return
					}
				}

				// 试用素材
				let reportPictures = ''
				for (const i in this.submitResultsFiles) {
					if (reportPictures == '') {
						reportPictures = this.submitResultsFiles[i].url
					} else {
						reportPictures += "," + this.submitResultsFiles[i].url
					}
				}
				
				// 试用素材必填校验
				if(this.taskInfo.enableMaterial == '1'){
					if (!this.isNotNull(reportPictures)) {
						this.$u.toast("请上传工作素材！")
						return
					}
				}
				
				// 截图凭证
				let voucherPictures = ''
				for (const i in this.voucherFiles) {
					if (voucherPictures == '') {
						voucherPictures = this.voucherFiles[i].url
					} else {
						voucherPictures += "," + this.voucherFiles[i].url
					}
				}
				
				// 社交平台截图凭证必填校验
				if(this.taskInfo.enableVoucher == '1'){
					if (!this.isNotNull(voucherPictures)) {
						this.$u.toast("请上传截图凭证！")
						return
					}
				}
				
				// 订单号 
				if(this.taskInfo.enableOrderId == '1'){
					if (!this.isNotNull(this.form.platformOrderNo)) {
						this.$u.toast("请填写订单号！")
						return
					} else {
						// 再次检验是否为数字+字母
						const regex = /^[a-zA-Z0-9]+$/;
						if(!regex.test(this.form.platformOrderNo)){
							this.form.platformOrderNo = '';
							this.$u.toast("请输入正确的订单号，中文字符无效！");
							return
						}
					}
				}
				
				if (!this.isNotNull(this.form.nickName)) {
					this.$u.toast("微信昵称不能为空哦！");
					return;
				}

				// 设置按钮不可点击
				this.isClickBtn = true;
				this.showLoading();
				
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/evaluation/signup/submit/result",
					id: this.recordId,
					reportContent: this.form.reportContent,
					reportPictures: reportPictures,
					voucherPictures: voucherPictures,
					platformOrderNo: this.form.platformOrderNo, // 电商平台订单号
					nickName: this.form.nickName, // 微信昵称
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.$u.toast("提交成功，等待验收");
					setTimeout(() => {
						// 跳转到【我的待办】
						uni.reLaunch({url:'/pages_tabbar_contact/personal_contact/WorkToDo?backto=personalIndex'});
					}, 2500)
				} else {
					this.isClickBtn = false;
					this.showMSG('error', '出错啦')
				}
			},

			
			/**
			 * 【重要！提交成果前请仔细阅读】 
			 */
			showRules() {
				if (this.show_rule) {
					this.iconNameRules = 'arrow-right'
					this.show_rule = false
				} else {
					this.iconNameRules = 'arrow-down'
					this.show_rule = true
				}
			},
			
			/**
			 * 【请按审核意见修改成果，仅2次返修机会！】 
			 */
			showReason() {
				if (this.show_reason) {
					this.iconNameReason = 'arrow-right'
					this.show_reason = false
				} else {
					this.iconNameReason = 'arrow-down'
					this.show_reason = true
				}
			},
			
			/**
			 * 跳转到“品牌推广活动”报名详情页
			 */
			async goToSingUp() {
				this.$u.route('/pages_private_scene1/evaluation/sign_up?docUnid=' + this.taskInfo.id);
			},
			
			/**
			 * 跳转到商品销售页面
			 */
			async goToDistributionGoods() {
				this.$u.route('/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + this.taskInfo.goodsNo + '&goodsId=' +this.taskInfo.goodsId);
			},
			
			/**
			 * 接收上传组件传过来的值并更新附件列表数据
			 * 获取附件列表（工作素材）
			 */
			async getResultsFiles(res) {
				this.submitResultsFiles = res;
			},
			
			/**
			 * 接收上传组件传过来的值并更新附件列表数据
			 * 获取附件列表（社交平台截图凭证）
			 */
			async getVoucherFiles(res) {
				this.voucherFiles = res;
			},
			
			/**
			 * 初始化附件列表（凭证）
			 * @param {Object} orunid 实例id
			 */
			async getFiles(orunid, fieldName) {
				let result = await this.$u.api.unifyRequest({
					userId: this.userInfo.userId,
					nickName: this.userInfo.nickName,
					appid: 'FILE',
					wf_num: 'R_FILE_BL002',
					orunid: orunid,
					fieldName: fieldName,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					// 试用素材
					if (fieldName == this.form.partnerId) {
						this.submitResultsFiles = result.data
					}
					// 截图凭证
					if (fieldName == "voucher") {
						this.voucherFiles = result.data
					}
				}
			},
			
			showLoading() {
				wx.showLoading({
				  title: '提交中...',
				  icon: 'none',
				});
			},
			 
			hideLoading() {
				wx.hideLoading();
			},
			
		}
	};
</script>

<style scoped>
	.aui-flex {
		display: flex;
		width: 93%;
		margin: 0 auto;
	}

	.aui-flex-goods {
		margin-right: .8em;
		width: 160rpx;
		height: 160rpx;
		line-height: 160rpx;
		text-align: center;
	}

	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
		border-radius: 15rpx;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}

	.goods-title {
		width: 515rpx;
		display: -webkit-box;
		/*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
		-webkit-line-clamp: 1;
		/*设置多少行*/
		-webkit-box-orient: vertical;
		/*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
		overflow: hidden;
		/*文本会被修剪，并且剩余的部分不可见*/
		text-overflow: ellipsis;
		/*显示省略号来代表被修剪的文本*/
		font-size: 32rpx;
	}

	.textarea-block {
		background: #f5f5f5;
		width: 93%;
		margin: 0 auto;
		border-radius: 5px;
		padding: 20rpx;
		height: 11.5rem;
		user-select: text !important;
		-webkit-user-select: text;
	}

	.textarea-block textarea {
		width: 100%;
		padding: 1rem;
		font-size: 0.95rem;
		overflow: hidden;
		resize: none;
		height: 8rem;
		border: none;
		background: none;
		line-height: 1.8;
	}

	.pictrues-box {
		width: 95%;
		margin: 0 auto;
	}

	.v-sperate {
		height: 5rpx;
		background: #f7f1f7;
	}

	.width93 {
		width: 93%;
		margin: 0 auto;
	}

	.modal-item {
		/* margin: 40rpx 0rpx; */
		height: 100rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* color: #9f9d9e; */
		border-top: 1rpx solid #eeeded;
	}

	.rule-title {
		height: 100rpx;
		line-height: 100rpx;
		width: 90%;
		margin: 0 auto;
		font-weight: bold;
	}

	.rule-content {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f4f4f4;
	}

	.Tips {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #f02323;
		padding-left: 10rpx;
		font-weight: normal;
	}

	.aui-choice-white {
		background: #fff;
	}

	.b-line {
		position: relative;
	}

	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #e2e2e2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	
	.color-red {
		color: #eb5468;
	}
</style>